<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="keywords" content="首页关键字" />
  <meta name="description" content="首页描述" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Cache-Control" content="no-cache" />
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  
  <link rel="stylesheet" href="../resources/css/weui/weui.min.css">
  <link rel="stylesheet" href="../resources/css/main.min.css">
  <link rel="stylesheet" href="../resources/css/man.min.css">
  
  <script src="../resources/js/jquery-1.10.min.js"></script>
  <script src="../resources/js/jquery.touchSwipe.min.js"></script>
  <script src="../resources/js/frmwebm.min.js"></script>
  <title>绑定手机</title>
  <style>
  .avatar_bg{
  }
  .avatar{
	margin-top:-20.8vw;
  }
  .avatar_bg img{
    display:block; margin:0 auto;height:21.6vw;width:21.6%;
  }
  .avatar img{
    display:block; margin:0 auto;height:20vw;width:20%;
  }
  .talk_word_div{
    display: block;
    width: auto;
	background:#ffffff;
	padding:10px 15px;
	font-size: 14px;
  }
  .talk_word_div .inputbox{
    width: auto;
	border-bottom:0px;
  }
  .bind_btn{
    color: #666666;
    font-style: normal;
    font-weight: 400;
    height: 44px;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    padding: 1px 0;
	font-size: 18px;
	width:71vw;
  }
  .input_error{
	border-color:red;
	box-shadow:0 0 1px rgba(255, 0, 0, 1), 0 0 5px rgba(255, 0, 0, 1);;
	outline:0 none;
  }
.weui-agree {
  display: block;
  padding: .5em 15px;
  font-size: 13px;
}
.weui-agree a {
  color: #586C94;
}
.weui-agree__text {
  color: #999999;
}
.weui-agree__checkbox {
  -webkit-appearance: none;
          appearance: none;
  outline: 0;
  font-size: 0;
  border: 1px solid #D1D1D1;
  background-color: #FFFFFF;
  border-radius: 3px;
  width: 13px;
  height: 13px;
  position: relative;
  vertical-align: 0;
  top: 2px;
}
.weui-agree__checkbox:checked:before {
  font-family: "weui";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-align: center;
  speak: none;
  display: inline-block;
  vertical-align: middle;
  text-decoration: inherit;
  content: "\EA08";
  color: #09BB07;
  font-size: 13px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%) scale(0.73);
  -webkit-transform: translate(-50%, -48%) scale(0.73);
}
.weui-agree__checkbox:disabled {
  background-color: #E1E1E1;
}
.weui-agree__checkbox:disabled:before {
  color: #ADADAD;
}
  </style>
</head>
<body style="background: linear-gradient(225deg, rgba(140, 180, 200, 1) 0%, rgba(140, 180, 200, 1) 0%, rgba(64, 120, 155, 1) 100%, rgba(64, 120, 155, 1) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);">
	<div style="margin-top:5.466667vw;margin-bottom:15.6vw;">
		<div class="avatar_bg">
			<img src="../resources/images/market/woman/u185.png">
		</div>
		<div class="avatar">
			<img src="../resources/images/market/woman/u187.jpg">
		</div>
	</div>
	
	<div style="padding:10px 30px;text-align: center;" class="talk_word_div">
		<table style="margin:0 auto;width:100%;">
			<tr>
				<td><input id="tele" class="inputbox" style="height:38px;width:100%;" placeholder="请输入11位手机号" type="text" value="" onblur="vTele();"></td>
			</tr>
			<tr>
				<td style="border-top: 1px solid #e6e6e6;">
					<input id="code" class="inputbox" style="float:left;width:120px;height:38px;" placeholder="请输入4位验证码" type="text" value="" onblur="vCode();">
					<input id="codeBtn" type="button" onclick="gotoCode()" style="float: right; top: 5px;" class="weui_btn weui_btn_mini weui_btn_plain_default" value="获取验证码">
				</td>
			</tr>
		</table>
	</div>
	
	<label class="weui-agree" for="weuiAgree" style="margin:8.666667vw 15px;text-align: left;font-size: 14px;color:#E4E4E4;">
		<input type="checkbox" class="weui-agree__checkbox" id="weuiAgree">
		<span class="weui-agree__text">
			已阅读并同意<a href="javascript:void(0);">《武汉市场圈协议》</a>
		</span>
	</label>
	
	<div style="margin:0px 30px;text-align: left;">
		<button id="okBtn" style="width:100%;" onclick="gotoMember()" class="bind_btn">绑定手机</button>
	</div>
	
<script type="text/javascript">
function gotoCode()
{
	var obj=$("#codeBtn");
	frmwebm.toast('验证码发送成功', 2000);
}
function gotoMember()
{
	var obj=$("#okBtn")[0];
	obj.setAttribute("disabled", "disabled");
	if(false==vTele())
	{
		obj.removeAttribute("disabled");
		return;
	}
	if(false==vCode())
	{
		obj.removeAttribute("disabled");
		return;
	}
	
	//与后台交互
	window.location.href="bindSucc.jsp";
}
function vTele()
{
	var obj=$("#tele");
	var value = obj.val();
	if(!(/^1\d{10}$/.test(value)))
	{
		obj.addClass("input_error");
		obj.focus();
		return false;
	}
	else
	{
		obj.removeClass("input_error");
		return true;
	}
}
function vCode()
{
	var obj=$("#code");
	var value = obj.val();
	if(value.length!=4)
	{
		obj.addClass("input_error");
		obj.focus();
		return false;
	}
	else
	{
		obj.removeClass("input_error");
		return true;
	}
}
</script>
</body>
</html>
